/** @jsxImportSource @emotion/react */
import {
  BlobInputList, CCell, Cell, Input, InputLine, LineColumn, SuffixInput, Table, TableBody, TableHead, TableRow, Text
} from "customize-easy-ui-component";
import * as React from "react";
import {InspectRecordLayout, InternalItemProps, RepLink, SelectInput, useItemInputControl} from "../../common/base";
import {calcAverageArrObj, tableSetInp} from "../../../common/tool";
import {useMeasureInpFilter} from "../../common/hooks";
import {检查结论选} from "../../tools";
import {css} from "@emotion/react";

export const 天气选= ['晴', ];
export const 路面选= ['混凝土路面', ];

export const tail行驶速= <Text css={{"@media print": {fontSize: '0.875rem'}}}>
  注：最大运行速度允差为设计值±10%。
</Text>;
const 车状态= ['空载','满载' ];
const 方向s= ['正','反' ];

export const itemA行驶速= ['天气行驶','温度行驶','风速行驶','湿度行驶','路面行驶','行驶速空','行驶速满'] as string[];
车状态.forEach((name, i: number) => {
  itemA行驶速.push(name+'行v',name+'行r');
});

const itemAm=itemA行驶速.concat('无最运速','满最运速');
export const MaxSpeed=
    React.forwardRef((
        { children, show ,alone=true,redId,nestMd,label,}:InternalItemProps,  ref
    ) => {
      const [getInpFilter]=useMeasureInpFilter(null,itemAm,);
      const {inp, setInp} = useItemInputControl({ ref });
      const spemp=Number(calcAverageArrObj(inp?.行驶速空,(row)=>row?.s, 2,2)) || '';
      const spful=Number(calcAverageArrObj(inp?.行驶速满,(row)=>row?.s, 2,2)) || '';
      //【注意】{ ||''}；不能改成 { ??''}；
      return <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show} redId={redId}
                                  nestMd={nestMd} alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        试验条件：
        <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center',justifyContent:'center'}}>
          <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
              天气:
                <BlobInputList value={inp?.天气行驶 || ''} rows={1} datalist={天气选}
                           style={{display: 'inline-flex', width: '5rem', maxWidth: '100%', fontSize: '1rem',}}
                           listStyle={css({fontSize: '1rem',})}
                           onListChange={v => setInp({...inp, 天气行驶: v || undefined})}/>
            </div>
            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
              温度：
              <Input value={inp?.温度行驶 || ''} size={2} style={{display: 'inline-flex', width: 'unset'}}
                      onChange={e => setInp({...inp, 温度行驶: e.currentTarget.value || undefined}) }/>
              ℃；
            </div>
            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
              最大风速：
                <Input value={inp?.风速行驶 || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                       onChange={e => setInp({...inp, 风速行驶: e.currentTarget.value || undefined}) }/>
              m/s；
            </div>
            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
            空气最大相对湿度:
                  <Input value={inp?.湿度行驶 || ''}  size={2} style={{display: 'inline-flex', width: 'unset'}}
                          onChange={e => setInp({...inp, 湿度行驶: e.currentTarget.value || undefined}) }/>
            %；
            </div>
            <div css={{display: 'inline-flex', alignItems: 'center', flexWrap: 'wrap'}}>
              试验路面类型：
                <BlobInputList value={inp?.路面行驶 || ''} rows={1} datalist={路面选}
                               style={{display: 'inline-flex', width: '19rem', maxWidth: '100%', fontSize: '1rem',}}
                               listStyle={css({fontSize: '1rem',})}
                               onListChange={v => setInp({...inp, 路面行驶: v || undefined})}/>
            </div>
        </div>
        <hr/>
        {车状态.map((clzt, i: number) => {
          const ztag=clzt+'行';
          const sbiao='行驶速'+(0===i? '空':'满');
          return <React.Fragment key={i}>
            <LineColumn column={8}>
              {方向s.map((fxian, t: number) => {
                return <React.Fragment key={t}>
                  <InputLine label={`${clzt}-${fxian}方向速度`}>
                    <SuffixInput value={inp?.[sbiao]?.[t]?.s || ''}
                                 onChange={e => tableSetInp(sbiao, t, inp, setInp, 's', e.currentTarget.value || undefined)}>km/h</SuffixInput>
                  </InputLine>
                </React.Fragment>;
              })}
            </LineColumn>
            平均速度={0===i? spemp : spful}（km/h）；
            <LineColumn column={6}>
              <div css={{margin: 'auto'}}>设计值： {0===i? inp?.无最运速 : inp?.满最运速} （km/h）</div>
              <InputLine label='试验结果'>
                <SuffixInput value={inp?.[ztag+'v'] || ''}
                             onChange={e => setInp({...inp, [ztag+'v']: e.currentTarget.value || undefined})}>km/h</SuffixInput>
              </InputLine>
              <InputLine label='结果判定'>
                <SelectInput value={inp?.[ztag+'r'] || ''} list={检查结论选}
                             onChange={e => setInp({...inp, [ztag+'r']: e.currentTarget.value || undefined})}/>
              </InputLine>
            </LineColumn>
          </React.Fragment>;
        })}
        {tail行驶速}
    </InspectRecordLayout>;
});
//附表6　最大行驶
export const MaxSpeedVw = ({orc, rep, label,}: { orc: any, rep: any, label: string }
) => {
  const spemp=Number(calcAverageArrObj(orc?.行驶速空,(row)=>row?.s, 2,2)) || '';
  const spful=Number(calcAverageArrObj(orc?.行驶速满,(row)=>row?.s, 2,2)) || '';
  return <>
    <div css={{"@media print": {paddingBottom: '8rem', pageBreakInside: 'avoid'}}}>
      <Text id='MaxSpeed' variant="h4" css={{marginTop: '1rem',
      }}>{label}</Text>
      <div css={{display: 'flex',flexWrap: 'wrap',justifyContent: 'space-between',maxWidth: '70rem'}}>
        试验条件：
        <div css={{display: 'inline-flex'}}>天气:{orc?.天气行驶 || ' '}</div>
        温度：{orc?.温度行驶 || ' '} ℃
        <div css={{display: 'inline-flex'}}>最大风速：{orc?.风速行驶 || ' '} m/s</div>
        空气最大相对湿度: {orc?.湿度行驶 || ' '} %；
        <div css={{display: 'inline-flex'}}>试验路面类型：{orc?.路面行驶 || ' '}</div>
      </div>
    </div>
    <Table fixed={["10%", "7%", "9%", "9%", "14%", "15%", "%", "11%", "11%"] }
                    css={{borderCollapse: 'collapse', "@media print": {marginTop: '-8rem'}}} tight miniw={800}>
      <TableHead>
        <TableRow>
          <CCell>车辆状态</CCell><CCell>方向</CCell><CCell>测量距离（m）</CCell><CCell>测量时间（s）</CCell><CCell>速度（km/h）</CCell>
          <CCell>平均速度（km/h）</CCell><CCell>设计值（km/h）</CCell><CCell>试验结果</CCell><CCell>结果判定</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink ori rep={rep} tag={'MaxSpeed'}>
          {车状态.map((clzt, i: number) => {
            const ztag=clzt+'行';
            const sbiao='行驶速'+(0===i? '空':'满');
            return <React.Fragment key={i}>
                {方向s.map((fxian, t: number) => {
                  return <TableRow key={t}>
                    {0 === t && <CCell rowSpan={2}>{clzt}</CCell>}
                    <CCell>{fxian}</CCell><CCell>-</CCell><CCell>-</CCell>
                    <CCell>{orc?.[sbiao]?.[t]?.s}</CCell>
                    {0 === t && <>
                      <CCell rowSpan={2}>{0===i? spemp : spful}</CCell>
                      <CCell rowSpan={2}>{0===i? orc?.无最运速 : orc?.满最运速}</CCell>
                      <CCell rowSpan={2}>{orc?.[ztag+'v']}</CCell><CCell rowSpan={2}>{orc?.[ztag+'r']}</CCell>
                    </>}
                  </TableRow>;
                })}
            </React.Fragment>;
          })}
          <TableRow>
            <Cell colSpan={9} css={{whiteSpace: 'pre-wrap'}}>{tail行驶速}</Cell>
          </TableRow>
        </RepLink>
      </TableBody>
    </Table>
  </>;
};

/*其它类似页面
* */

